<template>
    <div class="job-person-container">
        <div class="company-login-box">
            <!--title-->
            <div class="company-login-title">
                <h3>求职方登录</h3>
            </div>
            <!--登录信息的表单-->
            <div class="company-login-form">
                <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
                    <el-input v-model="dataForm.clientOrServer" type="hidden"></el-input>

                    <el-form-item prop="username">
                        <el-input v-model="dataForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input type="password" v-model="dataForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item prop="captcha">
                        <el-row :gutter="15">
                            <el-col :span="13">
                                <el-input v-model="dataForm.captcha" placeholder="验证码">
                                </el-input>
                            </el-col>
                            <el-col :span="10" class="login-captcha">
                                <img style="width: 100px;height: 38px" :src="captchaPath" @click="getCaptcha()" alt="">
                            </el-col>
                        </el-row>
                    </el-form-item>

                    <el-button type="primary" style="margin-top: 30px;width: 330px" @click="dataFormSubmit()">立即登录</el-button>
                </el-form>
            </div>


            <!--请完善用户的基本信息 Dialog-->
           <!-- <el-dialog
                    title="请完善基本信息"
                    :visible.sync="baseInfoVisibDialog"
                    width="60%"
            >
                <el-form :inline="true"
                         :model="baseInfoForm"
                         class="demo-form-inline"
                         label-width="150px"
                >

                    <el-form-item label="真实姓名：" >
                        <el-input v-model="baseInfoForm.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>

                    <el-form-item label="性别：">
                        <el-select v-model="baseInfoForm.gender" placeholder="请选择">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="0"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="年龄：">
                        <el-input v-model="baseInfoForm.age" placeholder="请填写年龄"></el-input>
                    </el-form-item>

                    <el-form-item label="电话：">
                        <el-input v-model="baseInfoForm.phone" placeholder="请填写电话"></el-input>
                    </el-form-item>

                    <el-form-item label="微信：">
                        <el-input v-model="baseInfoForm.wechat" placeholder="请填写微信号"></el-input>
                    </el-form-item>

                    <el-form-item label="QQ：">
                        <el-input v-model="baseInfoForm.qq" placeholder="请填写QQ"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱：">
                        <el-input v-model="baseInfoForm.email" placeholder="请填写邮箱"></el-input>
                    </el-form-item>


                    <el-form-item label="选择学历：" >
                        <el-select placeholder="请选择" v-model="baseInfoForm.educationId">
                            <el-option
                                    v-for="item in educationOption"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveBaseInfo()">保存信息</el-button>
                </span>
            </el-dialog>-->



            <!--底部的相关信息-->
            <div class="company-login-buttom">
                <span style="color: #C0C4CC">没有账号?</span>
                <router-link to="/home/registerJob">
                    <span style="color: #409EFF">立即注册</span>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import {getUUID} from "@/utils";
    import userApi from "@/api/user";
    import userBaseInfoApi from "@/api/userbaseinfosApi/userBaseInfoApi";
    import commonApi from "@/api/commonApi";

    export default {
        inject:['reload'],
        name: "job-login",
        data(){
            return{

                //打开弹窗
                baseInfoVisibDialog:false,

                //用户的基本信息
   /*             baseInfoForm:{
                    userInfoId:'',
                    name:'',
                    gender:'',
                    age:'',
                    phone:'',
                    wechat:'',
                    qq:'',
                    email:'',
                    educationId:'',
                    advator:''
                },*/

                /*处理登录的参数*/
                dataForm: {
                    username: '',
                    password: '',
                    uuid: '',
                    captcha: '',
                    clientOrServer:'1',        // 1 代表这是客户端登录
                    companyOrPerson:'2'        // 2 客户登录 3企业用户
                },
                //二维码的图片路径
                captchaPath:'',


                educationOption:[],

                user:{},
                //登录校验
                dataRule: {
                    username: [
                        { required: true, message: '帐号不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, message: '验证码不能为空', trigger: 'blur' }
                    ]
                },
            }
        },
        created() {
            this.getCaptcha()
        },
        mounted() {
            this.loadingInfo()
            this.loadingEducation()
        },
        methods:{

            /*在用户登录以后,看一下baseInfo有没有被加载*/
            /*loadingInfo(){
                const cookie = this.$cookie.get("client_token")
                if (cookie){
                    const baseInfoObj = JSON.parse(localStorage.getItem("userbaseInfo"))
                    console.log("baseInfoObj",baseInfoObj)
                    if (baseInfoObj==null){
                        this.baseInfoVisibDialog = true;
                    }
                }
            },*/
            /*保存用户的基本信息*/
            /*saveBaseInfo(){
                const userId = JSON.parse(localStorage.getItem("user")).userId
                this.baseInfoForm.userInfoId = userId

                userBaseInfoApi.saveUserBaseInfo(this.baseInfoForm)
                    .then(data => {
                        if (data.data.code === 0){
                            this.$message({
                                type:'success',
                                message:'信息保存成功'
                            })

                            //将填写的信息保存到userBaseInfo中
                            localStorage.setItem("userbaseInfo",JSON.stringify(this.baseInfoForm))
                            this.baseInfoVisibDialog = false

                        }
                    })
                    .catch(err => {
                        Promise.reject(err)
                    })
            },*/
            /*加载教育信息*/
            /*loadingEducation(){
                commonApi.loadingEducation()
                    .then(data => {
                        if(data.data.code === 0){
                            this.educationOption = data.data.data
                        }
                    })
                    .catch(err => {
                        Promise.reject(err)
                    })
            },*/
            // 获取验证码
            getCaptcha () {
                this.dataForm.uuid = getUUID()
                this.captchaPath = 'http://localhost:8088//renren-fast/captcha.jpg?uuid=' + this.dataForm.uuid;
            },

            //登录功能
            dataFormSubmit(){
                this.$refs['dataForm'].validate((valid) => {
                    if (valid){
                        userApi.login(this.dataForm).then(response => {
                            if (response.status == 200 && response.data.code === 0) {
                                this.$cookie.set('client_token', response.data.token)
                                localStorage.setItem("client_token",response.data.token)
                                this.$router.replace({name:'home'})
                                this.dataForm.username = ''
                                this.dataForm.password = ''
                                this.dataForm.captcha = ''
                                userApi.loginInfo().then(response => {
                                    this.user = response.data.user;
                                    const userInfo = JSON.stringify(this.user)
                                    localStorage.setItem('user',userInfo)
                                    this.$router.replace({name:'home'})
                                    //location.reload()           //重新加载页面 方式一
                                    this.reload()                 //重新加载页面 方式二  最优方法
                                //加载菜单和权限
                                userApi.loadingMenuAndPers(this.user.userId)
                                    .then(data => {
                                        sessionStorage.setItem('menuList',JSON.stringify(data.data.menuList))
                                        sessionStorage.setItem('permissions',JSON.stringify(data.data.permissions))


                                        userApi.loadingBaseInfo(this.user.userId)
                                            .then(data => {
                                                if (data.data.code === 0){
                                                    localStorage.setItem("userbaseInfo",JSON.stringify(data.data.baseInfo))
                                                    this.reload()           //重新刷新页面
                                                }
                                            })
                                            .catch(error => {
                                                Promise.reject(error)
                                            })
                                    })
                                    .catch(error =>{
                                        Promise.reject(error)
                                    })
                                })
                                .catch(error => {
                                    Promise.reject(error)
                                })


                            } else {
                                this.getCaptcha()
                                this.$message.error(response.data.msg)
                                this.dataForm.username = ''
                                this.dataForm.password = ''
                                this.dataForm.captcha = ''
                            }
                        }).catch(error => {

                        })
                    }
                })
            }
        }
    }
</script>

<style>
    /*求职者登录的页面容器*/
    .job-person-container{
        width: 100%;
        height: 550px;
        /*background-color: #bfa;*/
        background-image: url("../../../../src/assets/tigerPersonal.jpg");
        background-repeat: no-repeat;
        background-size:100% 555px;
    }

    /*登录框*/
    .company-login-box{
        float: right;
        width: 330px;
        height: 450px;
        background: #ffffff;
        margin-top: 50px;
        margin-right: 60px;
        padding-left: 20px;
        padding-right: 20px;
    }
    /*登录表单*/
    .company-login-form{
        margin-top: 40px;
    }
    /*底部信息*/
    .company-login-buttom{
        margin-top: 30px;
        font-size: 13px;
        margin-left: 100px;
    }

</style>
